<template>
  <view class="switch">
    <view :class="['switch-bg', locale !== 'ug-CN' ? 'switch-select-ug' : 'switch-select-zh']"/>
    <view @click="changeLang('zh-CN')" :class="['switch-item', locale !== 'ug-CN' ? 'selected-color' : '']">汉</view>
    <view @click="changeLang('ug-CN')" :class="['switch-item', locale === 'ug-CN' ? 'selected-color' : '']">ئۇ</view>
  </view>
</template>

<script>
export default {
  name: "switch-lang",
  props: {
    showSwitch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    changeLang(lang) {
      this.$store.dispatch('setLang', lang);
      this.$emit('change')
    }
  }
}
</script>

<style scoped lang="scss">
.switch {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  direction: ltr;
  width: 160rpx;
  border-radius: 50rpx;
  color: #A4BCD8;
  background-color: rgba(17, 126, 255, 0.08);
  font-size: 26rpx;
  font-weight: 600;

  .switch-item {
    flex: 1;
    text-align: center;
    padding: 12rpx 0;
    z-index: 4;
  }

  .switch-bg {
    width: 75rpx;
    height: 44rpx;
    border-radius: 50rpx;
    background-color: $uni-text-color-inverse;
    position: absolute;
    left: 8rpx;
  }

  .switch-select-ug {
    animation: 0.4s forwards startLeft;
  }

  .switch-select-zh {
    animation: 0.4s forwards startRight;
  }

  @keyframes startRight {
    0% {
      left: 8rpx;
    }
    5% {
      bottom: 10rpx;
    }
    35% {
      height: 10rpx;
      bottom: 10rpx;
      width: 10rpx;
    }
    95% {
      width: 75rpx;
      height: 40rpx;
    }
    100% {
      left: 78rpx;
    }
  }

  @keyframes startLeft {
    0% {
      left: 90rpx;
    }
    5% {
      bottom: 10rpx;
    }
    35% {
      height: 10rpx;
      bottom: 10rpx;
      width: 10rpx;
    }
    95% {
      width: 75rpx;
      height: 40rpx;
    }
    100% {
      left: 8rpx;
    }
  }

  .selected-color {
    color: $uni-color-primary;
  }
}
</style>
